<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
  <style>
    body{
      font: 18px "Microsoft YaHei UI";
      margin: 0;
      background-color: #fafafa;
    }
    header,main,footer{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    header a{
      text-decoration: none;
      color: #6c6c6c;
    }
    header a:hover{
      color: #0aa1ed;
    }
    .el-input__inner{
      padding-right: 35px;
    }
    /*销量排行榜表格间距*/
    .el-table .el-table__cell{
      padding: 0;
    }
    /*给图片添加阴影*/
    .item_div img:hover{
      position: relative;
      bottom: 5px;
      /*元素阴影: x偏移值 y偏移值 浓度 范围 颜色*/
      box-shadow: 0 0 12px 5px #333;
    }
    /*去掉多余的拖动条*/
    .el-main{
      overflow:hidden;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <div style="width: 1200px;margin: 0 auto">
        <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
        <span style="margin-left: 50px">
        <a href="/index.html" style="color: #0aa1ed">首页</a><el-divider direction="vertical"></el-divider>
        <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">帮助中心</a>
      </span>
      </div>
      <!--蓝条开始-->
      <div style="width: 100%;height:60px;background-color: #82c8ec">
        <el-menu style="width: 1200px;margin: 0 auto"
                 :default-active="selectIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#82c8ec"
                 text-color="#fff"
                 active-text-color="#fff">
          <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
          <el-menu-item style="float: right" index="-1">
            <el-input size="mini" @keydown.native.enter="search()" v-model="wd" placeholder="请输入关键字搜索"></el-input>
          </el-menu-item>
          <el-button style="float: right;background-color: rgba(0,0,0,0);border:none;position: relative;top: 15px;left: 220px"
                     icon="el-icon-search" @click="search()"></el-button>
        </el-menu>
      </div>
      <!--蓝条结束-->
    </el-header>
    <el-main style="width: 1200px;margin: 100px auto 0 auto">

      <!--商品列表开始-->
      <el-row :gutter="20">
        <el-col :span="6" v-for="p in productArr">
          <el-card :body-style="{ padding: '0px' }">
            <div class="item_div" style="padding: 20px 20px 0 20px">
              <a :href="'/detail.html?id='+p.id">
                <img :src="p.url" width="100%" height="240" class="image">
              </a>
            </div>
            <div style="padding: 14px;">
              <a :href="'/detail.html?id='+p.id" style="text-decoration: none;color: #333">
                <p style="margin-top: 0;font-size: 15px;height: 38px">{{p.title}}</p>
              </a>
              <div class="bottom clearfix" style="color: #6c6c6c">
                <span>￥{{p.price}}
                  <small style="text-decoration: line-through">￥{{p.oldPrice}}</small></span>
                <span style="float: right">销量:{{p.saleCount}}件</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->
    </el-main>
    <el-footer>
      <div style="background-image: url('imgs/wave.png');
    height: 95px;margin-bottom: -30px"></div>
      <div style="background-color: #3f3f3f;padding: 30px;
    text-align: center;color: #b1b1b1;font-size: 14px;height: 100px">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
      </div>
    </el-footer>
  </el-container>

</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        wd:"",
        productArr:[],
        categoryArr:[],
        selectIndex:0
      }
    },methods:{
      search(){
        axios.get("/product/selectByWd?wd="+v.wd).then(function (response) {
        v.productArr=response.data;
        })
      },
      handleSelect(index){
        //传递过来的index 其实就是分类的id
        //跳转到新的页面显示这个分类下的商品信息
        if (index!=-1){//判断出点击的不是搜索框
          axios.get("/product/selectByCid?cid="+index).then(function (response) {
            v.productArr=response.data;
          })
        }

      }
    },
    created:function () {
      //发请求获取所有的分类信息
      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
      //判断地址栏中是否包含cid
      if(location.search.indexOf("cid")!=-1){
        //得到地址栏中的分类id
        let cid=location.search.split("=")[1];
        //让首页点击的分类在此页面中显示被选中
        this.selectIndex=cid;
        //查询此分类下所有商品的数据
        axios.get("/product/selectByCid?cid="+cid).then(function (response) {
          v.productArr = response.data;
        })
      }else{
        //地址栏中不包含cid 那就是包含wd 显示搜索结果
        let wd=location.search.split("=")[1];
        //请求地址中如果有中文 浏览器会自动进行url编码操作
        //直接得到的内容是包含%和16进制类似的乱码效果
        //需要通过decodeURI方法进行解码后得到中文翻译
        this.wd=decodeURI(wd);
        //通过搜索的关键字请求查询相关的产品信息
        axios.get("/product/selectByWd?wd="+wd).then(function (response) {
          v.productArr=response.data;
        })
      }



    }
  })
</script>
</html>